<template>
	<view class="overflow-hidden  text-white mt-8">
		<view class="flex overflow-x-scroll grid-gap-10">
			<view v-for="(item, index) in props.list" :key="index" @click="select(item)"
				:class="item.value === props.modelValue ? 'border-blue' : 'border-black-1'"
				class="w-100   round-8 border-blod  flex-shrink ">
				<image :src="WEBCONFIG.web_url +'/app/ycArtQrCode/image/rendering/'+ item.previewImg"
					class="w-100 flex-shrink round-top-8  " mode="widthFix" />
				<view class="text-center py-2 item-bg fs-12  round-bottom-8">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const emit = defineEmits(['update:modelValue'])
	const props = defineProps({
		modelValue: {
			type: Number,
			default: 0
		},
		list: {
			type: Array,
			default: []
		}
	})

	const select = (e) => {
		emit('update:modelValue', e.value)
	}
</script>

<style>
	.item-bg {
		background: rgba(0, 0, 0, 0.7);
	}
</style>